<template>
  <div class="shoptit">
      <div class="tit">
        {{tit.name}}
      </div>
      <div class="tit_english">
        {{tit.english}}
      </div>
  </div>
</template>

<script>

export default {
  name: 'shoptit',
  props:{
      tit:{}
  },
  components:{

  }
}
</script>

<style lang="less" scoped>
  .shoptit{
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    .tit{
        font-weight: 500;
        font-size: 26px;
        line-height: 40px;
        height: 40px;
        color: #292929;
        text-align: center;
        position: relative;
    }
    .tit:before{
      content: "";
      display: block;
      width: 480px;
      height: 1px;
      background-color: #CCCDCE;
      position: absolute;
      top: 50%;
      left:20px;
    }
    .tit::after{
      content: "";
      display: block;
      width: 480px;
      height: 1px;
      background-color: #CCCDCE;
      position: absolute;
      top: 50%;
      right:20px;
    }
    .tit_english{
        font-weight: 500;
        font-size: 20px;
        line-height: 36px;
        color: #999999;
        text-align: center;
    }
  }

</style>
